<template>
  <div>
    <a-form layout="vertical">
      <a-row :gutter="12">
        <a-col :xs="24" :sm="12" :xl="8">
          <a-form-item
            label="合同模板名称"
            v-bind="validateInfos.template_name"
          >
            <a-input
              placeholder="请输入合同模板名称"
              v-model:value="modelRef.template_name"
            />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :xl="8">
          <a-form-item v-bind="validateInfos.timeout_time">
            <template #label>
              <a-space :size="40">
                <span>截止日期</span>
                <a-checkbox v-model:checked="modelRef.date_flag">
                  永久生效
                </a-checkbox>
              </a-space>
            </template>
            <a-date-picker
              style="width: 100%"
              placeholder="请选择截止日期"
              v-model:value="modelRef.timeout_time"
              :value-format="dateFormatStr"
              :disabled="modelRef.date_flag"
              :disabled-date="disabledDate"
            />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :xl="8">
          <a-form-item v-bind="validateInfos['validTime.num']">
            <template #label>
              <span>合同有效期</span>
              <TextTip tips="用于生成合同租赁日期" />
            </template>
            <a-input-group compact>
              <a-input-number
                style="width: 70%"
                placeholder="请输入合同有效期"
                v-model:value="modelRef.validTime.num"
                :min="1"
              />
              <a-select
                style="width: 30%"
                v-model:value="modelRef.validTime.unit"
                :options="optionsInit.validTimeUnit"
              />
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :xl="8">
          <a-form-item
            label="计算精度"
            v-bind="validateInfos.calculate_accuracy"
          >
            <a-select
              placeholder="请选择计算精度"
              v-model:value="modelRef.calculate_accuracy"
              :options="optionsInit.calculate_accuracy_unit"
            />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :xl="8">
          <a-form-item label="计算顺序" v-bind="validateInfos.calculate_order">
            <a-select
              placeholder="请选择计算顺序"
              v-model:value="modelRef.calculate_order"
              :options="optionsInit.calculate_order_unit"
            />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :xl="4">
          <a-form-item label="应收整数" v-bind="validateInfos.receivable_round">
            <a-select
              placeholder="请选择是否应收整数"
              v-model:value="modelRef.receivable_round"
              :options="optionsInit.receivable_round_unit"
            />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :xl="4">
          <a-form-item
            label="单位保留小数点"
            v-bind="validateInfos.unit_price_point"
          >
            <a-input-group compact>
              <a-input-number
                style="width: 70%"
                placeholder="保留位数"
                v-model:value="modelRef.unit_price_point"
                :min="1"
              />
              <span class="item-unit">位</span>
            </a-input-group>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import { defineComponent, reactive, toRaw, toRefs, watch } from "vue";
import { Form } from "ant-design-vue";
import { TextTip } from "bl-common-vue3";
import store from "../../../../store";
import moment from "moment";

const useForm = Form.useForm;

export default defineComponent({
  name: "ContractTemplateInfo",
  components: { TextTip },
  props: {
    validateTrigger: {
      type: Number,
      default: 0,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      optionsInit: {},
      dateFormatStr: "YYYY-MM-DD",
      detail: {},
    });

    const disabledDate = (current) => {
      return current < moment().startOf("day");
    };

    /** 表单 */
    const modelRef = reactive({
      template_name: "",
      validTime: {
        num: "",
        unit: "day",
      },
      calculate_accuracy: "accuracy_1",
      calculate_order: "order_1",
      unit_price_point: 2,
      receivable_round: 0,
      date_flag: true,
      timeout_time: "",
    });
    const requiredRule = [{ required: true, message: "必填" }];
    const rulesRef = reactive({
      template_name: requiredRule,
      //   "validTime.num": requiredRule,
    });
    const { validate, validateInfos } = useForm(modelRef, rulesRef);

    watch(
      () => modelRef.date_flag,
      (val) => {
        if (val) {
          modelRef.timeout_time = "";
          delete rulesRef.timeout_time;
        } else {
          modelRef.timeout_time = state.detail.timeout_time || "";
          rulesRef.timeout_time = requiredRule;
        }
      }
    );

    const validateForm = () => {
      validate()
        .then(() => {
          const basic_clause = JSON.parse(JSON.stringify(modelRef));
          delete basic_clause.template_name;
          delete basic_clause.date_flag;
          delete basic_clause.timeout_time;

          const params = {
            basic_clause,
            template_name: modelRef.template_name,
          };
          if (modelRef.date_flag) {
            params.date_flag = 1;
          } else {
            params.date_flag = 0;
            params.timeout_time = modelRef.timeout_time;
          }

          emit("getResult", {
            params,
            type: "TemplateInfo",
          });
        })
        .catch(() => {
          emit("getResult", {
            params: null,
            type: "TemplateInfo",
          });
        });
    };

    watch(
      () => props.validateTrigger,
      () => {
        validateForm();
      }
    );

    /** 详情回显 */
    const setModelRef = () => {
      const { detail } = state;
      if (detail.id) {
        for (let key in modelRef) {
          if (key == "template_name") {
            modelRef.template_name = detail.template_name;
          } else if (key == "date_flag") {
            modelRef.date_flag = detail.date_flag ? true : false;
          } else {
            modelRef[key] = detail.basic_clause[key];
          }
        }
      }
    };

    /** 初始化 */
    const init = () => {
      store.dispatch("GetTemplateInit").then((initData) => {
        state.optionsInit = initData;
        console.log("-------optionsInit", toRaw(state.optionsInit));
        state.detail = store.getters.currentContractTpl;
        console.log("-------detail", toRaw(state.detail));
        setModelRef();
      });
    };

    init();

    return {
      modelRef,
      validateInfos,
      disabledDate,
      ...toRefs(state),
    };
  },
});
</script>
